<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>案例</title>
    <link rel="stylesheet" href="../案例/案例.css" />
    <!-- swiper -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.css"
    />
    <!-- 引入swiper -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <!-- vue语法 -->
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="demo1">
      <!-- 头部 -->
      <div class="box1-all">
        <div class="box1">
          <img src="../../img/2.png" alt="" />
          <div class="box1-right">
            <img src="../../img/3.png" alt="" />
            <div>咨询我们:12345678900</div>
          </div>
        </div>
      </div>
      <!-- 轮播 -->
      <div class="carousel">
        <div class="carousel-top">
          <div class="one"><a href="../首页/首页.html">首页</a></div>
          <div class="one">
            <a href="../网站开发/网站开发.html">网站开发</a>
          </div>
          <div class="one"><a href="../APP开发//APP开发.html">APP开发</a></div>
          <div class="one">
            <a href="../小程序开发/小程序开发.html">小程序开发</a>
          </div>
          <div class="one"><a href="../案例/案例.html">案例</a></div>
          <div class="one">
            <a href="../关于我们/关于我们.html">关于我们</a>
          </div>
        </div>
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
          </div>
          <!--如果需要滚动条-->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- APP案例 -->
      <div class="case">
        <div class="industry1">APP案例</div>
        <!-- 选项卡 -->
        <div class="tabbox">
          <div id="tabNav">
            <div class="active">APP/小程序 开发</div>
            <div>网站开发</div>
          </div>
          <div class="content">
            <div class="active">
              <!-- 轮播图-->
              <div class="swiper mySwiper1">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <a href="../案例详情/案例详情.html">
                      <img src="../../img/连在一起的图片.png" alt="" />
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="../案例详情/案例详情.html">
                      <img src="../../img/连在一起的图片.png" alt="" />
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="../案例详情/案例详情.html">
                      <img src="../../img/连在一起的图片.png" alt="" />
                    </a>
                  </div>
                </div>
                <div class="swiper-pagination"></div>
              </div>
              <!-- 轮播图-->
              <div class="swiper mySwiper1">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <a href="../案例详情/案例详情.html">
                      <img src="../../img/连在一起的图片.png" alt="" />
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="../案例详情/案例详情.html">
                      <img src="../../img/连在一起的图片.png" alt="" />
                    </a>
                  </div>
                  <div class="swiper-slide">
                    <a href="../案例详情/案例详情.html">
                      <img src="../../img/连在一起的图片.png" alt="" />
                    </a>
                  </div>
                </div>
                <div class="swiper-pagination"></div>
              </div>
            </div>
            <div>网站开发</div>
          </div>
        </div>
        <!-- 选项卡结束 -->
      </div>
      <!-- 底部 -->
      <div class="below">
        <div class="top">
          <div class="left">
            <div class="change">山东柏瑞设计有限公司</div>
            <div class="change">联系电话:12345678900</div>
            <div class="change">
              地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南)
            </div>
          </div>
          <div class="right">
            <div><img src="../../img/柏瑞.png" alt="" /></div>
            <div>微信公众号</div>
          </div>
        </div>
        <div class="bottom">
          <div>
            Shandong Bairui software Technology Co.
            Ltd.山东柏瑞软件科技有限公司版权所有 鲁ICP备17006298号-1
          </div>
        </div>
      </div>
    </div>
    <!-- 选项卡切换 -->
    <script>
      $(function () {
        $(".tabbox div").click(function () {
          //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
          $(this).addClass("active").siblings().removeClass("active");
          //获取选中元素的下标
          var index = $(this).index();
          console.log($(this));
          $(this)
            .parent()
            .siblings()
            .children()
            .eq(index)
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
      });
    </script>
    <script>
      // vue实例
      //使用 vue3 的基本格式
      const { createApp, ref } = Vue;
      const demo1 = createApp({
        // 逻辑代码全部写在setup里面
        // 因为没有语法糖，无论是定义的"变量"或者"函数"都必须！
        // 把名称再多写一次！放在在最后return里面
        setup() {
          //测试变量
          // 列表循环

          //测试函数
          //h5页面必须把名称return，vite中不需要（重要区别）
          return {};
        },
      });
      //应用vue（就是挂载在上面ID绑定的元素上）
      demo1.mount("#demo1");
      // 轮播图
      var mySwiper = new Swiper(".swiper", {
        autoplay: {
          delay: 2000,
        },
        loop: true, //循环模式选项// 如果需要滚动条
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
  </body>
</html>
